<template>
  <div class="app-container table-container">
    <el-row :gutter="20">
      <el-col :span="22">
        <el-form ref="searchDate" :model="searchDate" :inline="true" label-width="68px">
          <el-form-item label="检票场馆">
            <!--          checkYard-->
            <el-select
              v-model="searchDate.checkYard"
              filterable
              placeholder="请选择场地名称"
              clearable
              size="small"
              @change="changeAuditState"
            >
              <el-option
                v-for="item in checkYardOprion"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="通道状态">
            <el-select
              v-model="searchDate.channalType"
              filterable
              placeholder="请选择场地名称"
              clearable
              size="small"
              @change="changeAuditState"
            >
              <el-option
                v-for="item in channalTypeOption"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检票时间">
            <el-date-picker
              v-model="searchDate.purchaseDate"
              filterable
              size="small"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeAuditState"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @cliclk="queryOrder">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="medium" style="width: 120px" @click="exportAble">导出
        </el-button>
      </el-col>

    </el-row>
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="orderData"
      style="font-size: 16px;"
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
    >
      <el-table-column prop="checkInAisle" label="检票通道" min-width="10" />
      <el-table-column prop="ipAddress" label="IP地址" min-width="10" />
      <el-table-column prop="channalType" label="通道状态" min-width="10" />
      <!--            <el-table-column prop="purchaseCanal" label="购买渠道" min-width="50"></el-table-column>-->
      <el-table-column prop="region" label="所属区域" min-width="10" />
      <el-table-column label="今日检票(张)">
        <el-table-column prop="whkDay" label="文慧卡" min-width="10" />
        <el-table-column prop="hstDay" label="红山通" min-width="10" />
        <el-table-column prop="zhmDay" label="智慧码" min-width="10" />
        <el-table-column prop="zzpDay" label="纸质票" min-width="10" />
        <el-table-column prop="countDay" label="合计检票" min-width="10" />
      </el-table-column>
      <el-table-column label="累计检票(张)">
        <el-table-column prop="whcCount" label="文慧卡" min-width="10" />
        <el-table-column prop="hstCount" label="红山通" min-width="10" />
        <el-table-column prop="zhmCount" label="智慧码" min-width="10" />
        <el-table-column prop="zzpCount" label="纸质票" min-width="10" />
        <el-table-column prop="allcount" label="合计检票" min-width="10" />
      </el-table-column>
    </el-table>

    <!--            <el-table-column prop="checkYard" label="检票场馆" min-width="70"></el-table-column>-->
    <!--            <el-table-column prop="tictCode" label="票代码" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="startTime" label="预约时间" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="yardName" label="场地名称" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="tickName" label="票务名称" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="tickForm" label="门票形式" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="userType" label="用户类型" min-width="50"></el-table-column>-->
    <!--            <el-table-column prop="vipId" label="会员ID" min-width="50"></el-table-column>-->
    <!--        </el-table-column>-->
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'

export default {
  name: 'CheckList',
  components: {},
  data() {
    return {
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      channalTypeOption: [],
      checkYardOprion: [],
      lookBoxShow: false,
      lookShow: false,
      uuid: '',
      orderData: [],
      searchDate: {
        checkYard: '',
        channalType: '',
        purchaseDate: ''
      },
      defaultAuditState: '',
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          checkYard: '',
          channalType: '',
          startTime: '',
          endTime:''
        }
      }
    }
  },
  mounted() {
    // 默认展示审核中的数据
    this.queryOrder(this.searchDate)
    this.queryYard()
    this.queryChannalType()
  },
  methods: {
    // 导出
    exportAble() {
      window.location.href = 'http://chenwg.utools.club/tck//kdi/tict/search/exportAll';
    },
    // 查询场地
    queryYard() {
      this.axios
        .request({
          method: 'get',
          url: './ope/kdi/yard/search/findAllTree',
          params: {}
        })
        .then(response => {
          this.checkYardOprion = response.data[0].subs
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 查询通道状态
    queryChannalType() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_CHANNEK_TYPE',
          params: {}
        })
        .then(response => {
          this.channalTypeOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 重置重置
    restart() {
      this.searchDate.checkYard = ''
      this.searchDate.purchaseDate = ''
      this.searchDate.channalType = ''
      this.queryOrder(this.searchDate)
    },
    // 查询
    changeAuditState() {
      this.queryOrder(this.searchDate)
    },
    // 获取所有数据
    queryOrder(param) {
      this.orderPage.searchData.checkYard = param.checkYard
      if(param.purchaseDate!=null&&param.purchaseDate!=''&&param.purchaseDate.length>=2){
        this.orderPage.searchData.startTime=(param.purchaseDate)[0];
        this.orderPage.searchData.endTime=(param.purchaseDate)[1];
      }
      this.orderPage.searchData.ticFrom = param.ticFrom
      this.axios.request({
        method: 'get',
        url: './tck/kdi/selk/search/findAll',
        params: getDataForSP(this.orderPage)
      }).then(response => {
        this.orderData = response.data.data
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryOrder()
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryOrder()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
  .pagination{
    padding: 10px 0;
  }
  }

</style>
